import { Component, OnInit, ElementRef, Renderer2, OnDestroy } from '@angular/core';
import { NavController, NavParams } from '@ionic/angular';
import { DataService } from '@services/data.service';


@Component({
  selector: 'park-page',
  templateUrl: 'park.html',
  styleUrls: ['park.scss']
})

export class ParkPage implements OnInit, OnDestroy {
  Pdata;
  freeCars;
  freeCar;                  // 空余车位
  refreshNumInterval;       // 获取空余车位定时器
  refreshInterval;
  parkData;                 // 获取车辆信息
  arr = [];                 // 刷新车辆信息
  scrollInterval;           // 滚动定时器
  ctransitionMark = false;  // 滚动标识

  constructor(
    public el: ElementRef,
    public renderer: Renderer2,
    // public navParams: NavParams,
    public navCtrl: NavController,
    public dataservice: DataService,
  ) {
  }

  ngOnInit() {
    const elements = document.querySelectorAll('ion-tab-bar');
    if (elements != null) {
      Object.keys(elements).map((key) => {
        elements[key].style.display = 'none';
      });
    }
    this.freeCars = [0, 1, 2, 3, 4];
    this.freeCar = '00163';
    this.NumScroll(this.freeCar);
    this.refreshNumInterval = setInterval(() => {
      this.freeCar = this.RndNum(5);
      this.NumScroll(this.freeCar);
    }, 10000);
    this.init();
  }

  init() {
    const res = [
      {
        PlateNumber: '粤D1520D',
        State: '进场',
        Position: 'Z进口',
        DateTime: '20:10:11'
      },
      {
        PlateNumber: '粤D1520D',
        State: '进场',
        Position: 'C进口',
        DateTime: '20:10:11'
      },
      {
        PlateNumber: '粤D1520D',
        State: '进场',
        Position: 'Z进口',
        DateTime: '20:10:11'
      },
      {
        PlateNumber: '粤D1520D',
        State: '进场',
        Position: 'C进口',
        DateTime: '20:10:11'
      },
      {
        PlateNumber: '粤D1520D',
        State: '进场',
        Position: 'Z进口',
        DateTime: '20:10:11'
      },
      {
        PlateNumber: '粤D1520D',
        State: '进场',
        Position: 'C进口',
        DateTime: '20:10:11'
      },
      {
        PlateNumber: '粤D1520D',
        State: '进场',
        Position: 'Z进口',
        DateTime: '20:10:11'
      },
      {
        PlateNumber: '粤D1520D',
        State: '进场',
        Position: 'C进口',
        DateTime: '20:10:11'
      }
    ];
    this.parkData = res;
    let i = 0;
    this.refreshInterval = setInterval(() => {
      if (this.arr.length) {
        this.parkData.unshift(this.arr.pop());
        this.ctransitionMark = true;
        this.TextScroll(i);
        if (i === 9) {
          i = 0;
        }
        i++;
      }
      /*限制数组长度，防止dom节点过渡浪费*/
      this.parkData.splice(10);
    }, 2000);
    this.updateData();
  }

  // 获取空余车位数字-->字符转换
  freechange(num) {
    const free = num;
    const freechange = free.toString().split('');
    const arr1 = [];
    for (let i = 0; i < 5 - freechange.length; i++) {
      arr1.push(0);
    }
    this.freeCar = arr1.concat(freechange);
  }


  // 数字滚动
  NumScroll(num) {
    this.freechange(num);
    const arr = this.freeCar;
    for (let i = 0; i < arr.length; i++) {
      const obj = this.el.nativeElement.querySelector('#s' + i);
      this.renderer.setStyle(obj, 'transition', 'margin-top 3s');
      if (arr[i] <= 5) {
        this.renderer.setStyle(obj, 'margin-top', 40 * arr[i] - 200 + 'px');
      } else {
        this.renderer.setStyle(obj, 'margin-top', -(40 * arr[i] + 200) + 'px');
      }
    }
  }

  // 更新数据
  updateData() {
    this.refreshInterval = setInterval(() => {
      const res = [
        {
          PlateNumber: '粤A1520D',
          State: '进场',
          Position: 'Z进口',
          DateTime: '20:10:11'
        },
        {
          PlateNumber: '粤B1520D',
          State: '进场',
          Position: 'C进口',
          DateTime: '20:10:11'
        },
        {
          PlateNumber: '粤C1520D',
          State: '进场',
          Position: 'D进口',
          DateTime: '20:10:11'
        },
        {
          PlateNumber: '粤D1520D',
          State: '进场',
          Position: 'A进口',
          DateTime: '20:10:11'
        },
        {
          PlateNumber: '粤E1520D',
          State: '进场',
          Position: 'F进口',
          DateTime: '20:10:11'
        },
        {
          PlateNumber: '粤F1520D',
          State: '进场',
          Position: 'G进口',
          DateTime: '20:10:11'
        },
        {
          PlateNumber: '粤G1520D',
          State: '进场',
          Position: 'H进口',
          DateTime: '20:10:11'
        },
        {
          PlateNumber: '粤H1520D',
          State: '进场',
          Position: 'C进口',
          DateTime: '20:10:11'
        }
      ];
      this.arr = res.concat(this.arr);
    }, 10000);
  }

  // 生成随机数
  RndNum(n) {
    let rnd = '';
    for (let i = 0; i < n; i++) {
      rnd += Math.floor(Math.random() * 10);
    }
    return rnd;
  }

  TextScroll(i) {
    const objs = this.el.nativeElement.querySelector('.items');
    this.renderer.setStyle(objs, 'margin-top', - (i + 1) * 40 + 'px');
    this.renderer.setStyle(objs, 'transition', 'margin-top 3s');
    const obj = this.el.nativeElement.querySelector('.item' + i);
  }

  ngOnDestroy() {
    if (this.refreshInterval) {
      clearInterval(this.refreshInterval);
    }
    if (this.scrollInterval) {
      clearInterval(this.scrollInterval);
    }
    if (this.refreshNumInterval) {
      clearInterval(this.refreshNumInterval);
    }
  }

}
